<template>
  <div class="wrap">
    <div class="title-hide clear">
      个人中心
      <el-button type="primary" @click="getPdf(htmlTitle)" class="down-btn">下载简历</el-button>
    </div>
    <div class="height"></div>
    <div class="menu-left">
      <div class="menu" @click="drawer = true">
        <i class="el-icon-menu"></i>
        <span>模块管理</span>
      </div>
    </div>
    <el-drawer
      :visible.sync="drawer"
      :modal="false"
      class="drawer"
      direction="ltr">
      <div>
        <ul class="drawer-info">
          <li>
            <span>基本信息</span>
            <el-button type="primary" round size="mini" class="mini-btn">必填</el-button>
          </li>
          <li>
            <span>求职意向</span>
            <el-switch
              v-model="isShowPurpose"
              active-color="#66b1ff"
              inactive-color="#cccccc"
              class="switch-btn">
            </el-switch>
          </li>
          <li>
            <span>自我评价</span>
            <el-switch
              v-model="isShowIntroduction"
              active-color="#66b1ff"
              inactive-color="#cccccc"
              class="switch-btn">
            </el-switch>
          </li>
          <li>
            <span>工作经验</span>
            <el-switch
              v-model="isShowWorkExperience"
              active-color="#66b1ff"
              inactive-color="#cccccc"
              class="switch-btn">
            </el-switch>
          </li>
           <li>
            <span>技能特长</span>
            <el-switch
              v-model="isShowSkill"
              active-color="#66b1ff"
              inactive-color="#cccccc"
              class="switch-btn">
            </el-switch>
          </li>
          <li>
            <span>教育背景</span>
            <el-switch
              v-model="isShowStudyExperience"
              active-color="#66b1ff"
              inactive-color="#cccccc"
              class="switch-btn">
            </el-switch>
          </li>
          <li>
            <span>项目经验</span>
            <el-switch
              v-model="isShowProjectExperience"
              active-color="#66b1ff"
              inactive-color="#cccccc"
              class="switch-btn">
            </el-switch>
          </li>
         
        </ul>
      </div>
    </el-drawer>
    <div class="content" id="pdfDom">
      <div class="ml-8">
        <div class="head">
          <div class="head-left">
            <img class="head-img" src="../assets/icon.jpg"/>
          </div>
          <div class="head-right">
            <div class="head-cont" :class="{'edit': isEditBasicInfo}" @click="editBasicInfo">
              <div class="name">{{ showForm.name }}</div>
              <div class="detail" v-show="!showForm.isNotshowDescribe">{{ showForm.describe }}</div>
              <div class="info">
                <span v-if="showForm.date">{{ showForm.date }} |</span>
                <span v-if="showForm.wYears">{{ showForm.wYears }} |</span>
                <span v-if="showForm.phone">{{ showForm.phone }} |</span>
                <span v-if="showForm.email">{{ showForm.email }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="cont">
          <!-- 求职意向模块 start-->
          <div class="flex" :class="{'edit': isEditPurpose}" @click="editPurpose" v-show="isShowPurpose">
            <div class="cont-left">
              <span class="title">求职意向</span>
            </div>
            <ul class="cont-right cursor">
              <li><i class="iconfont icon-shoudaobaodan"></i>{{ showForm1.occupation ? showForm1.occupation: '意向岗位' }}</li>
              <li><i class="iconfont icon-xuqiutoubiao"></i>{{ showForm1.city | getCityText }}</li>
              <li><i class="iconfont icon-naozhong"></i>{{ showForm1.joinTime ? showForm1.joinTime : '入职时间' }}</li>
              <li><i class="iconfont icon-qiyexufei"></i>{{ showForm1.wages ? showForm1.wages : '薪资要求' }}</li>
            </ul>
          </div>
          <!-- 求职意向模块 end-->
          <!-- 自我评价模块 start-->
          <div class="flex" v-show="isShowIntroduction">
            <div class="cont-left">
              <span class="title">自我评价</span>
            </div>
            <ul class="cont-right no-border">
              <el-input
                type="textarea"
                class="textarea-cont"
                placeholder="篇幅不要太长，注意结合简历整体的美观度，如果真的有很多话要说，建议以求职信的形式附上。自我评价应做到突出自身符合目标岗位要求的“卖点”，避免过多使用形容词，而应该通过数据及实例来对自身价值进行深化。"
                v-model="selfIntroduction"
                maxlength="200"
                :autosize="{ minRows: 3, maxRows: 4}"
              >
              </el-input>
            </ul>
          </div>
          <!-- 自我评价模块 end-->
          <!-- 工作经验模块 start-->
          <div class="flex cont-box" 
          :class="{'edit': isEditWorkExperience}" 
          @click.stop="isEditWorkExperience = true" 
          @mouseover="isEditWorkExperience = true" 
          @mouseleave="isEditWorkExperience = false"
          v-show="isShowWorkExperience">
            <span class="edit-tool" v-show="isEditWorkExperience">
              <i class="iconfont icon-addition_fill" @click="addWorkExperience"></i>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click">
                <div>
                  清空填写内容 <el-button type="primary" round size="mini" class="mini-btn" @click="clearWorkExperience">清空</el-button>
                </div>
                <div class="switch-info">
                  显示当前模块
                  <el-switch
                    v-model="isShowWorkExperience"
                    active-color="#66b1ff"
                    inactive-color="#cccccc"
                    class="switch-btn">
                  </el-switch>
                </div>
                <i class="iconfont icon-setup_fill" slot="reference"></i>
              </el-popover>
            </span>
            <div class="cont-left">
              <span class="title">工作经验</span>
            </div>
            <div class="cont-right no-border">
              <div v-for="(item, index) in showForm3" :key="index" class="cont-right-info">
                <i class="iconfont icon-empty_fill" 
                v-show="isEditWorkExperience && index > 0"
                @click="delWorkExperience(index)"
                ></i>
                <div class="span-title">
                  <el-date-picker
                    v-model="item.date"
                    size="mini"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd" >
                  </el-date-picker>
                  <el-input v-model="item.company" placeholder="填写公司名称" class="input-w i-right"></el-input>
                </div>
                <div><el-input v-model="item.postion" placeholder="填写职位名称" class="input-w"></el-input></div>
                <div class="detail">
                  <el-input
                    type="textarea"
                    class="textarea-cont"
                    placeholder="详细描述你的职责范围、工作任务及取得的成绩，工作经验的时间采取倒叙形式，最近经历写在前面，描述尽量具体简洁，工作经验的描述与目标岗位的招聘要求尽量匹配，用词精准。"
                    v-model="item.detail"
                    maxlength="200"
                    :autosize="{ minRows: 3, maxRows: 4}"
                  >
                  </el-input>
                </div>
              </div>
            </div>
          </div>
          <!-- 工作经验模块 end-->
          <!-- 技能特长模块 start-->
          <div class="flex cont-box"  
          :class="{'edit': isEditSkill}"  
          @click.stop="isEditSkill = true"
          @mouseover="isEditSkill = true" 
          @mouseleave="isEditSkill = false"
          v-show="isShowSkill">
            <span class="edit-tool" v-show="isEditSkill && selSkills.length > 0">
              <i class="iconfont icon-brush_fill" @click="isAddSkill = true"></i>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click">
                <div>
                  清空填写内容 <el-button type="primary" round size="mini" class="mini-btn" @click="clearSkill">清空</el-button>
                </div>
                <div class="switch-info">
                  显示当前模块
                  <el-switch
                    v-model="isShowSkill"
                    active-color="#66b1ff"
                    inactive-color="#cccccc"
                    class="switch-btn">
                  </el-switch>
                </div>
                <i class="iconfont icon-setup_fill" slot="reference"></i>
              </el-popover>
            </span>
            <div class="cont-left">
              <span class="title">技能特长</span>
            </div>
            <div class="cont-right">
              <div class="add-btn" @click="isAddSkill = true" v-if="selSkills.length <= 0"><i class="iconfont icon-iconfonticon02"></i> 添加技能特长</div>
              <div class="clear progress" v-else>
                <span v-for="(item,index) in selSkills" 
                    :key="index"
                    class="progress-info">
                  <el-progress type="circle"
                    :percentage="item.skillLevel" 
                    class="mini-progress">
                  </el-progress>
                  <span>{{ item.name }}</span>
                </span>
              </div>
            </div>
          </div>
          <!-- 技能特长模块 end-->
          <!-- 学习经历模块 start-->
          <div class="flex cont-box" 
          :class="{'edit': isEditStudyExperience}" 
          @click.stop="isEditStudyExperience = true" 
          @mouseover="isEditStudyExperience = true" 
          @mouseleave="isEditStudyExperience = false"
          v-show="isShowStudyExperience">
            <span class="edit-tool" v-show="isEditStudyExperience">
              <i class="iconfont icon-addition_fill" @click="addStudyExperience"></i>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click">
                <div>
                  清空填写内容 <el-button type="primary" round size="mini" class="mini-btn" @click="clearStudyExperience">清空</el-button>
                </div>
                <div class="switch-info">
                  显示当前模块
                  <el-switch
                    v-model="isShowStudyExperience"
                    active-color="#66b1ff"
                    inactive-color="#cccccc"
                    class="switch-btn">
                  </el-switch>
                </div>
                <i class="iconfont icon-setup_fill" slot="reference"></i>
              </el-popover>
            </span>
            <div class="cont-left">
              <span class="title">教育背景</span>
            </div>
            <div class="cont-right no-border">
              <div v-for="(item, index) in showForm5" :key="index" class="cont-right-info">
                <i class="iconfont icon-empty_fill" 
                v-show="isEditStudyExperience && index > 0"
                @click="delStudyExperience(index)"
                ></i>
                <div class="span-title">
                  <el-date-picker
                    v-model="item.date"
                    size="mini"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd" >
                  </el-date-picker>
                  <el-input v-model="item.school" placeholder="填写学校名称" class="input-w i-right"></el-input>
                </div>
                <div><el-input v-model="item.major" placeholder="填写专业名称" class="input-w"></el-input></div>
                <div class="detail">
                  <el-input
                    type="textarea"
                    class="textarea-cont"
                    placeholder="尽量简洁，突出重点，成绩优异的话建议写上GPA及排名等信息，如：GPA：3.72/4（专业前10%）GRE：324"
                    v-model="item.detail"
                    maxlength="200"
                    :autosize="{ minRows: 3, maxRows: 4}"
                  >
                  </el-input>
                </div>
              </div>
            </div>
          </div>
          <!-- 学习经历模块 end-->
          <!-- 项目经验模块 start-->
          <div class="flex cont-box" 
          :class="{'edit': isEditProjectExperience}" 
          @click.stop="isEditProjectExperience = true" 
          @mouseover="isEditProjectExperience = true" 
          @mouseleave="isEditProjectExperience = false"
          v-show="isShowProjectExperience">
            <span class="edit-tool" v-show="isEditProjectExperience">
              <i class="iconfont icon-addition_fill" @click="addProjectExperience"></i>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click">
                <div>
                  清空填写内容 <el-button type="primary" round size="mini" class="mini-btn" @click="clearProjectExperience">清空</el-button>
                </div>
                <div class="switch-info">
                  显示当前模块
                  <el-switch
                    v-model="isShowProjectExperience"
                    active-color="#66b1ff"
                    inactive-color="#cccccc"
                    class="switch-btn">
                  </el-switch>
                </div>
                <i class="iconfont icon-setup_fill" slot="reference"></i>
              </el-popover>
            </span>
            <div class="cont-left">
              <span class="title">项目经验</span>
            </div>
            <div class="cont-right no-border">
              <div v-for="(item, index) in showForm6" :key="index" class="cont-right-info">
                <i class="iconfont icon-empty_fill" 
                v-show="isEditProjectExperience && index > 0"
                @click="delProjectExperience(index)"
                ></i>
                <div class="span-title">
                  <el-date-picker
                    v-model="item.date"
                    size="mini"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd" >
                  </el-date-picker>
                  <el-input v-model="item.project" placeholder="填写项目名称" class="input-w i-right"></el-input>
                </div>
                <div><el-input v-model="item.role" placeholder="填写角色名称" class="input-w"></el-input></div>
                <div class="detail">
                  <el-input
                    type="textarea"
                    class="textarea-cont"
                    placeholder="描述你参加的项目负责的工作内容，内容清晰，突出重点，如项目描述、项目职责、项目业绩。"
                    v-model="item.detail"
                    maxlength="200"
                    :autosize="{ minRows: 3, maxRows: 4}"
                  >
                  </el-input>
                </div>
              </div>
            </div>
          </div>
          <!-- 项目经验模块 end-->
        </div>
      </div>
    </div>
    <!-- 基本信息弹框 start -->
    <el-dialog title="编辑基本信息" :visible.sync="isEditBasicInfo" width="700px">
      <el-form :model="form" :inline="true" label-width="80px">
        <el-form-item label="你的姓名">
          <el-input v-model="form.name" autocomplete="off" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" class="sel">
          <el-date-picker
            v-model="form.date"
            type="date"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工作年限" class="sel">
          <el-select v-model="form.wYears" placeholder="请选择工作年限">
            <el-option v-for="item in workYears" :key="item.value" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像设置" class="sel">
          <el-select v-model="form.isShowPortrait" placeholder="请选择活动区域">
            <el-option label="显示" value="1"></el-option>
            <el-option label="隐藏" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone" autocomplete="off" max="11"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="form.email" autocomplete="off" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="精简描述" class="form-item">
          <span class="desc-switch">隐藏描述
            <el-switch
              v-model="form.isNotshowDescribe"
              active-color="#66b1ff"
              inactive-color="#cccccc">
            </el-switch>
          </span>
          <el-input v-model="form.describe" autocomplete="off" maxlength="100" class="input-l"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditBasicInfo = false">取 消</el-button>
        <el-button type="primary" @click="updateBasicInfo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 基本信息弹框 end -->
    <!-- 求职意向弹框 start -->
    <el-dialog title="编辑求职意向" :visible.sync="isEditPurpose" width="700px">
      <el-form :model="form1" :inline="true" label-width="80px">
        <el-form-item label="意向岗位">
          <el-input v-model="form1.occupation" autocomplete="off" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="意向城市" class="sel">
          <el-cascader
            :options="options"
            v-model="form1.city"
            :props="{value : 'label'}"
            placeholder="请选择意向城市"
            class="input-1"
            clearable
            ref='attr'
          ></el-cascader>
        </el-form-item>
        <el-form-item label="入职时间" class="sel">
          <el-select v-model="form1.joinTime" placeholder="请选择入职时间">
            <el-option v-for="item in joinWorkYears" :key="item.value" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="薪资要求">
          <el-input v-model="form1.wages" autocomplete="off" max="11"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditPurpose = false">取 消</el-button>
        <el-button type="primary" @click="updatePurpose">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 求职意向弹框 end -->
    <!-- 编辑技能特长弹框 start -->
    <el-dialog title="编辑技能特长" :visible.sync="isAddSkill">
      <div>
        <el-input v-model="skill" 
        autocomplete="off" 
        maxlength="18" 
        class="input-t" 
        placeholder="自定义技能（例如：数据分析），限制10个字以内"
        @keyup.enter.native="addSkill"></el-input>
        <el-button type="primary" @click="addSkill">添加</el-button>
      </div>
      <div class="dialog-cont">
        <div>根据您的职业推荐的技能</div>
        <div class="dialog-cont-info">
          <span class="little-tip"  v-for="(item, index) in skills" :key="item.value" :class="{ 'checked': item.isChecked}" @click="chooseSkill(index)">{{ item.name }}</span>
        </div>
      </div>
      <div class="dialog-cont">
        <div>已添加的技能（还可以添加{{ 10 - selSkills.length}}项技能）</div>
        <div class="cont-info">
          <div class="list" v-for="(item,index) in selSkills" :key="index">
            <div class="list-first">
              <i class="iconfont icon-jian" @click="delSkill(index, item.name)"></i>
              <span class="tip">{{ item.name }}</span>
            </div>
            <el-slider
              class="dia-slider"
              v-model="item.skillLevel"
              :step="25">
            </el-slider>
            <span class="level">{{ item.skillLevel|getLevel }}</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddSkill = false">取 消</el-button>
        <el-button type="primary" @click="updateSkill">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑技能特长弹框 end -->
  </div>
</template>

<script>
export { default } from './index.js'
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
